<template>
  <div class="number">
    <div class="search">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="medium"
      >
        <el-form-item label="">
          <el-select v-model="formInline.homestatus" placeholder="入住状态">
            <el-option label="已入住" :value="1"></el-option>
            <el-option label="未入住" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.unitname"
            placeholder="单元名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.buildnum" placeholder="幢号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.homenum" placeholder="房号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.homename"
            placeholder="住客姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button type="success" icon="el-icon-upload2" @click="moreExport">批量导出</el-button>
          <el-button type="danger" class="el-icon-delete" @click="moreDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        stripe
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="unitname" label="单元名称" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.unitname == null">暂无</span>
            <span v-if="scope.row.unitname">{{ scope.row.unitname }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="buildnum" label="幢号" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.buildnum == null">暂无</span>
            <span v-if="scope.row.buildnum">{{ scope.row.buildnum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="storeynum" label="楼层号" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.storeynum == null">暂无</span>
            <span v-if="scope.row.storeynum">{{ scope.row.storeynum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="homenum" label="房号" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.homenum == null">暂无</span>
            <span v-if="scope.row.homenum">{{ scope.row.homenum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="homename" label="住客姓名" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.homename == null">暂无</span>
            <span v-if="scope.row.homename">{{ scope.row.homename }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="homestatus" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.homestatus == 1">已入住</span>
            <span v-if="scope.row.homestatus != 1">未入住</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button plain @click="toEdit(scope.row)">编辑</el-button>
            <el-button type="warning" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page" style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="1"
        :page-sizes="[7, 10, 20, 30]"
        :page-size="10"
        layout=" total,sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { downloadXlsx } from "../../../../utils/xlsx.js";
export default {
  data() {
    return {
      // 批量删除的数据
      seleteDeleteDate: [],
      //要导出的表格
      selectTable: [],
      // 表格状态
      tableState: 0,
      //分页
      pageNumber: 0,
      pageSize: 10,
      total: 0,
      //表格数据
      tableData: null,

      //   搜索栏数据
      formInline: {
        homestatus: null,
        unitname: null,
        buildnum: null,
        homenum: null,
        homename: null,
      },
    };
  },
  methods: {
    //跳转编辑页面
    toEdit(val) {
      this.$router.push({
        path: "/house/edit",
        query: {
          type: "DETAIL",
          editId: val.id,
        },
      });
    },
    //单独删除
    handleDelete(val) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("house/delunitList", {
              params: {
                id: val.id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getTableData();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    moreDelete() {
      this.$confirm("此操作删除多项文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("house/delnumList", {
              params: {
                ids: this.seleteDeleteDate,
                token: sessionStorage.getItem("token"),
              },
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getTableData();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量导出
    moreExport() {
      this.$confirm("是否导出表格?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "导出成功!",
          });
          downloadXlsx(this.selectTable, "房屋信息.xlsx");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出",
          });
        });
    },
    //初始化表格
    getTableData() {
      this.$axios
        .get("/house/gethouseList", {
          params: {
            currPage: this.pageNumber,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          //   console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    //分页控制
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);

      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.pageNumber = val - 1;
      this.getTableData();
    },
    //选中表格行数据
   handleSelectionChange(val) {
  this.selectTable = val;
  let arr = [];
  // 将 row 的声明移到循环内部
  for (let i = 0; i < val.length; i++) {
    // 每次循环创建新对象
    let row = { // [!code ++]
      unitname: val[i].unitname,
      buildnum: val[i].buildnum,
      storeynum: val[i].storeynum,
      homenum: val[i].homenum,
      homename: val[i].homename,
      homestatus: val[i].homestatus
    };
    arr.push(row);
  }

  // 后续代码保持不变...
  let list = [];
  for (let j = 0; j < arr.length; j++) {
    let newArr = [];
    for (let key in arr[j]) {
      newArr.push(arr[j][key]);
    }
    list.push(newArr);
  }
  this.selectTable = list;

  // 删除数据id处理
  this.seleteDeleteDate = val.map(item => item.id); // 更简洁的写法
},
    //搜索栏提交
    onSubmit() {
      this.$axios
        .get("house/searchnumList", {
          params: {
            homestatus: this.formInline.homestatus,
            unitname: this.formInline.unitname,
            buildnum: this.formInline.buildnum,
            homenum: this.formInline.homenum,
            homename: this.formInline.homename,
            currPage: this.pageNumber,
            pageNum: this.pageSize,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          // console.log(res)
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss" scoped>
.number::v-deep {
  .table {
    .el-table {
      .el-table__header {
        thead {
          th {
            color: #000;
            font-size: 14px;
            background-color: #ddd;
          }
        }
      }
    }
  }
}
</style>